<template>
  <el-dialog v-model="visible" title="货单签收" :before-close="handleClose">
    <el-main>
      <h3>货单内容：</h3>
      <h4>发货客户信息</h4>
      <p>姓名：{{ bookingData.cfrom.name }}，电话：{{ bookingData.cfrom.phone }}，地址：{{ bookingData.cfrom.addr }}。</p>
      <h4>发货仓库及操作员信息</h4>
      <p>仓库名：{{ bookingData.wfrom.name }}，地址：{{ bookingData.wfrom.addr }}。
        操作员姓名：{{ bookingData.ofrom == null ? '系统创建' : bookingData.ofrom.name }}，
        联系方式：{{ bookingData.ofrom == null ? '系统创建' : bookingData.ofrom.phone }}。</p>
      <h4>收货客户信息</h4>
      <p>姓名：{{ bookingData.cto.name }}，电话：{{ bookingData.cto.phone }}，地址：{{ bookingData.cto.addr }}。</p>
      <h4>收货仓库及操作员信息</h4>
      <p>仓库名：{{ bookingData.wto.name }}，地址：{{ bookingData.wto.addr }}。
        操作员姓名：{{ bookingData.oto == null ? '暂无' : bookingData.oto.name }}，
        联系方式：{{ bookingData.oto == null ? '暂无' : bookingData.oto.phone }}。</p>
      <h4>费用信息</h4>
      <p>计费方式：按重计费，重量：{{ bookingData.booking.weight }}kg，运费：{{
          bookingData.booking.money
        }}元，货物价值：{{ bookingData.booking.value }}</p>
      <h4>付款方式</h4>
      <p>{{ bookingData.booking.payBefore ? '发货前付款' : '货到付款' }}</p>
      <p v-if="!bookingData.booking.payBefore" style="color: red">请联系客户付款</p>
      <h3>填写验收信息：</h3>
      <el-form :model="form" label-width="120px">
        <el-form-item label="验收结果">
          <el-select v-model="form.checkResult" placeholder="选择结果">
            <el-option v-for="rs in CheckResult" :key="rs.key" :label="rs.label" :value="rs.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注描述">
          <el-input v-model="form.checkDesc" autosize type="textarea"/>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer>
      <el-row justify="end">
        <el-button type="default" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="sureCheckOut">提交</el-button>
      </el-row>
    </el-footer>
  </el-dialog>
</template>

<script>
import {reactive} from "vue";
import {CheckResult, findIdByUsername, operatorCheckOut} from "@/scripts/data/operator";
import {STORE, UserType} from "@/scripts/account";

export default {
  name: "BookingCheckOut",
  props: ['bookingData', 'callback'],
  data() {
    return {
      oid: 0,
      visible: false,
      change: false,
      form: reactive({
        checkResult: '',
        checkDesc: ''
      }),
      CheckResult
    }
  },
  methods: {
    sureCheckOut() {
      this.change = true;
      this.form.bnum = this.bookingData.booking.bnum;
      this.form.oid = this.oid;
      operatorCheckOut(this.form, this.callback);
      this.visible = false;
    },
    handleClose() {
      this.visible = false;
      if (!this.change) {
        this.callback(-1);
      }
    }
  },
  mounted() {
    this.visible = true;
    if (STORE.userState.type == UserType.OPERATOR) {
      findIdByUsername(STORE.userState.data.username, (result) => {
        this.oid = result;
      })
    }
  }
}
</script>

<style scoped>

</style>